<template>
   <div class="smt-box">
        <div class="company-tit">
            <p class="tit-logo">
                <img  :src="img" alt=""/>
            </p>
            <p>{{companyinfro.mfrName}}</p>
        </div>
        <div class="company-infro">
        <div class="infro-list">
            <p class="introduction">公司介绍</p>
            <p class="line"></p>
            <p class="introcon">{{companyinfro.mfrIntroduction}}</p>
        </div>
        </div>
        <div class="company-scale">
            <div class="infro-list">
            <p class="introduction">公司规模</p>
            <p class="line"></p>
            <p class="introcon">{{companyinfro.mfrScale}}</p>
        </div>
        </div>
        <div class="company-infro">
            <div class="infro-list">
            <p class="introduction">产品类别</p>
            <p class="line"></p>
                <ul class="category">
                    <li v-for="item in  companyinfro.productClassification">
                    {{item}}
                    </li>
                </ul>
        </div>
        </div>
        <div class="company-infro">
            <div class="infro-list">
            <p class="introduction">我们的产品</p>
            <p class="line"></p>
                <ul class="product">
                    <li v-for="(item,index) in companyinfro.ourProducts" :key="index">
                        <div class="pic-top">
                            <img :src="item.img" alt=""/>
                            <p class="product-tit">{{item.title}}</p>
                        </div>
                    
                        <p class="product-con">{{item.txt}}</p>
                    </li>
                </ul>
        </div>
        </div> 
    </div>
</template>

<script>
import { getPCBdetail } from "@/api/home.js"
export default {
     name:"PCBdetail",
     data() {
      return {
          id:'',
          defaultImg:require('@/assets/img/default.png'),
          img:require('@/assets/img/logo.png'),
          companyinfro:'',
      }
    },
    created() {
        this.id = this.$route.query.id;
        getPCBdetail(this.id).then(res=>{
            if(res.code == 200){
                this.companyinfro = res.result;
                console.log(this.companyinfro)
                this.img = this.companyinfro.mfrImg;
            }
        })
    },
}
</script>

<style lang="less" scoped>
@import './../../../assets/style/edit.css';
.smt-box{
    width: 100%;
    background: #fff;
}
.company-tit{
    width: 100%;
    height: 270px;
    background-image: url("./../../../assets/img/smt.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    .tit-logo{
        background: #fff;
        padding: 10px 20px;
        margin-right: 40px;
        margin-left: 26%;
        box-shadow: 0px 2px 8px 0px rgba(179,179,179,0.5);
    }
    img{
        height: 86px;
        // margin-right: 50px;
    }
}
.company-infro{
    width: 56.2%;
    margin: auto;
    padding:0 30px;
    background: #fff;
}
.company-scale{
    width: 100%;
    padding: 90px 0;
    background: #F5F7FB;
    .infro-list{
        width: 56.2%;
        margin: auto;
        padding:0 30px;
    }
}
.infro-list{
    padding: 60px 0;
    font-size: 16px;
    line-height: 30px;
    letter-spacing:1px;
    .introduction{
        font-size: 22px;
        font-weight: 600;
        color: #191A24;
        line-height: 30px;
        text-align: center;
        // letter-spacing:2px;
    }
    .line{
        width: 36px;
        height: 2px;
        background: #4370F3;
        margin:16px auto 27px;
    }
    .introcon{
        padding: 0 15px;
        text-align: justify;
        // text-indent:2em
    }
    .category{
        margin: 0 15px;
        display: flex;  
        font-size: 17px; 
        color: #666666;
        flex-wrap: wrap;
        width: 100%;
        li{
            margin-bottom: 20px;
            &::after{
                content:"/";
            }
            &:last-child::after{
                content:"";
            }
        }
      
       
    }
    .product{
        // margin: 0 15px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        li{
            width: 23.7%;
            height: 360px;
            margin-right:1.2%;
            margin-bottom: 20px;
            padding: 40px 20px;
            &:nth-child(4n){
             margin-right:0;
            }
            .pic-top{
               border: 1px solid #979797;
            }
            img{
                height: 150px;
                display: block;
                margin: auto;
            }
            .product-tit{
                text-align: center;
                font-weight: bold;
                line-height: 25px;
                margin: 10px 0 10px
            }
            .product-con{
                font-size: 17px;
                text-align: justify;
                line-height: 20px;
                padding: 27px 5px 0;
            }
        }
    }

}
.infro-back{
    background: #F5F7FB;
}
.el-divider--horizontal {
    margin: 15px 0;
}
</style>